$prefix-for-webkit: true !default;
$prefix-for-mozilla: true !default;
$prefix-for-microsoft: true !default;
$prefix-for-opera: true !default;
$prefix-for-spec: true !default;

@mixin prefixer($property, $value, $prefixes) {
    @each $prefix in $prefixes {

        @if $prefix == webkit and $prefix-for-webkit == true {
            -webkit-#{$property}: $value;
        } @else if $prefix == moz and $prefix-for-mozilla == true {
            -moz-#{$property}: $value;
        } @else if $prefix == ms and $prefix-for-microsoft == true {
            -ms-#{$property}: $value;
        } @else if $prefix == o and $prefix-for-opera == true {
            -o-#{$property}: $value;
        } @else if $prefix == spec and $prefix-for-spec == true {
            #{$property}: $value;
        } @else {
            @warn "Unrecognized prefix: #{$prefix}";
        }
    }
}

@mixin transform($property...) {
    @include prefixer(transform, $property, webkit moz o spec);
}

@mixin transition($property...) {
    @include prefixer(transition, $property, webkit moz o spec);
}

@mixin animation($property...) {
    @include prefixer(animation, $property, webkit moz ms o spec);
}

@mixin backgroundSize($property...) {
    @include prefixer(background-size, $property, webkit moz o spec);
}

@mixin backgroundPosition($property...) {
    @include prefixer(background-position, $property, webkit moz o spec);
}


// ======================================================
// 通用方法

@mixin whl($width, $height) {
    width: $width;
    height: $height;
    line-height: $height;
}

@mixin absTop(){
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

// retina
@mixin at2x($path, $ext: "jpg", $w: auto, $h: auto) {
    $at1x_path: "#{$path}.#{$ext}";
    $at2x_path: "#{$path}@2x.#{$ext}";

    background-image: url("#{$at1x_path}");
    background-size: $w $h;

    @media all and (-webkit-min-device-pixel-ratio: 1.5),
    all and (-o-min-device-pixel-ratio: 3/2),
    all and (min--moz-device-pixel-ratio: 1.5),
    all and (min-device-pixel-ratio: 1.5) {
        background-image: url("#{$at2x_path}");
        background-size: $w $h;
    }

    background-repeat: no-repeat;

    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="$at1x_path", sizingMethod='scale');
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="$at1x_path", sizingMethod='scale');
}
